"use client"
import Content from '@/app/admin/page'
import React, { useState, useEffect } from 'react';
import BarChart from './components/BarChart';
import Linear from './components/Linear';
import Volume from './components/Volume';
import './index.css';
import { data1, data2, data3, data4, data5, data6 } from './data.json'

export default function MachineManage() {
  const [activeBtn, setActiveBtn] = useState(true)//按钮
  const [tabsInitData, setTabsInitData] = useState([])//tabs初始数据
  const [tabsData, setTabsData] = useState([] as any)//tabs数据
  const [receiving, setReceiving] = useState({} as any)//统一收件
  const [receivingCode, setReceivingCode] = useState({} as any)//统一收件码
  const [activation, setActivation] = useState({} as any)//统一收件码激活情况
  const [channelDistribution, setChannelDistribution] = useState({} as any)//统一收件办件渠道分布
  const [provincialLevel, setProvincialLevel] = useState({} as any)//省级单位对接情况
  const [cityLevel, setCityLevel] = useState({})//地市单位对接情况
  const [wholeSituation, setWholeSituation] = useState({})//整体办件情况
  const [onYear, setOnYear] = useState([] as any)//2023年2024年办件同比
  const [provinceArchiveList, setProvinceArchiveList] = useState([])//统一收件办件情况(省直)
  const [cityArchiveList, setCityArchiveList] = useState([])//统一收件办件情况(地市)
  const [archiveSituation, setArchiveSituation] = useState([] as any)//对接异常情况
  const [receivingOverdue, setReceivingOverdue] = useState([] as any)//统一收件超期
  const [provincialLevelOverdue, setProvincialLevelOverdue] = useState([] as any)//省级超期top5
  const [cityLevelOverdue, setCityLevelOverdue] = useState([] as any)//地市超期top5
  // 数字加标点
  const resultVal = (val: any) => {
    if (!val) return 0
    let result = null
    if (typeof val === 'number') {
      result = Math.floor(val).toLocaleString('en-US')
    } else {
      result = val || Math.floor(val * 1).toLocaleString('en-US')
    }
    return result
  }

  useEffect(() => {
    setReceiving(data1[0])
    setReceivingCode(data1[1])
    setActivation(data1[2])
    setChannelDistribution(data2[0])
    setProvincialLevel(data2[1])
    setOnYear(data3)
    setTabsData(data4[0])
    setArchiveSituation(data5)
    setReceivingOverdue(data6[0])
    setProvincialLevelOverdue(data6[1])
    setCityLevelOverdue(data6[2])
  }, [])

  return (
    <Content>
      <div className={'screen_bj'}>
        <div className={'div_text'}>
          <span className={'_title'}>绿能芯租系统运行概览</span>
        </div>
        <div className={'screen_contain'}>
          <div className={'screen_left'}>
            {/* 第一部分 */}
            <div className={'screen_item1'}>
              <div className={'div_text'}>
                <img src='/trend/title_tysj.png' alt='' width='100%' />
                <span className={'_text'}>主要营收来源</span>
              </div>
              {/* <div className={'div_text'}>
                <span className={'_text'}></span>
              </div> */}
              <div>
                <div style={{ display: 'flex', alignItems: 'center', margin: '20px 0 10px 0' }}>
                  <img src='/trend/形状 1259.png' alt='' height='12px' />&nbsp;
                  <span style={{ color: 'rgb(184 214 248)', fontWeight: 700, fontSize: 12 }}>租赁情况</span>
                </div>
                <div style={{ width: 300, lineHeight: '30px', background: 'url(/trend/bg_事项办件.png) no-repeat 0%/ contain', color: ' rgb(184 214 248)', padding: '0 20px', display: 'flex' }}>
                  <span style={{ width: 130 }}>总成本&nbsp;<b style={{ fontSize: 16 }}>{resultVal(receiving.sx)}</b></span>
                  <span>总收益&nbsp;<b style={{ fontSize: 16 }}>{resultVal(receiving.bj)}</b></span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', margin: '20px 0 10px 0' }}>
                  <img src='/trend/icon_统一收件码模式.png' alt='' height='12px' />&nbsp;
                  <span style={{ color: ' rgb(184 214 248)', fontWeight: 700, fontSize: 12 }}>售出情况</span>
                </div>
                <div style={{ width: 300, lineHeight: '30px', background: 'url(/trend/bg_事项办件.png) no-repeat 0% / contain', color: ' rgb(184 214 248)', padding: '0 20px', display: 'flex' }}>
                  <span style={{ width: 130 }}>销售量&nbsp;<b style={{ fontSize: 16 }}>{resultVal(receivingCode.sx)}</b></span>
                  <span>总收益&nbsp;<b style={{ fontSize: 16 }}>{resultVal(receivingCode.bj)}</b></span>
                </div>
              </div>
              <div className={'div_text'} style={{ marginTop: 30 }}>
                <img src='/trend/title_tysj.png' alt='' width='100%' />
                <span className={'_text'}>用户情况</span>
              </div>
              <div style={{ width: 300, padding: '24px 10px 0px 30px' }}>
                <div style={{ display: 'flex', marginBottom: 10, marginLeft: 10 }}>
                  <img src='/trend/icon_收件码.png' width='80px' alt='' />&emsp;
                  <div>
                    <div>用户总数量</div>
                    <b style={{ fontSize: 24 }}>{resultVal(activation?.wjh + activation?.yjh)}</b>个
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', lineHeight: '30px', color: 'rgb(184 214 248)' }}>
                  <div style={{ textIndent: 16, width: 135 }}>
                    <div style={{ lineHeight: '33px', background: 'url(/trend/img_yijh.png) no-repeat center / 100%', marginBottom: 10, }}>
                      <span style={{}}>会员数量&nbsp;-----<b>&nbsp;{resultVal(activation?.wjh)}</b></span>
                    </div>
                    <div style={{ lineHeight: '30px', background: 'url(/trend/img_yijh.png) no-repeat center/ 100%' }}>
                      <span style={{ marginBottom: 10, }}>用户数量&nbsp;-----<b>&nbsp;{resultVal(activation?.yjh)}</b></span>
                    </div>
                  </div>
                  <div style={{ background: 'url(/trend/img_圆.png) no-repeat 0% 0 / contain', width: '60px', height: 60, position: 'relative' }} ><img src='/trend/img_激活率.png' width='60px' alt='' />
                    <img className={'_dot_l'} src="/trend/_dot.png" alt="" width='100%' height='100%' />
                  </div>
                  <div style={{ width: 50, fontSize: 14 }}>
                    <span>激活率</span>
                    <span><b style={{ fontSize: 20 }}>{Math.floor(activation?.wjh / activation?.yjh * 100) || 0}</b>%</span>
                  </div>
                </div>
              </div>
            </div>
            {/* 第二部分 */}
            <div className={'screen_item2'}>
              <div className={'div_text'} style={{ marginTop: 20 }}>
                <img src='/trend/title_tysj.png' alt='' width='100%' />
                <span className={'_text'}>产品流量入口</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: 10, width: 300 }}>
                <div style={{ width: 90, background: 'url(/trend/img_电脑端.png) no-repeat 0% 0 / 100%', padding: '70px 0px 10px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <span>网站广告</span>
                  <span><b style={{ fontSize: 14 }}>{resultVal(channelDistribution[0])}</b>万次</span>
                </div>
                <div style={{ width: 90, background: 'url(/trend/img_手机app.png) no-repeat 0% 0 / 100%', padding: '70px 0px 10px', display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 10 }}>
                  <span>购物软件</span>
                  <span><b style={{ fontSize: 14 }}>{resultVal(channelDistribution[1])}</b>万次</span>
                </div>
                <div style={{ width: 90, background: 'url(/trend/img_窗口端.png) no-repeat 0% 0 / 100%', padding: '70px 0px 10px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <span>朋友介绍</span>
                  <span><b style={{ fontSize: 14 }}>{resultVal(channelDistribution[2])}</b>万次</span>
                </div>
              </div>
            </div>
          </div>
          <div className={'screen_center'}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', }}>
                <div style={{ background: 'url(/trend/img_圆.png) no-repeat 0% 0 / contain', height: 50, width: 50, display: 'flex', position: 'relative' }} >
                  <img className={'_dot'} src="/trend/_dot.png" alt="" width='100%' height='100%' />
                  <img src='/trend/img_圆点.png' height='10px' alt='' />
                  <span style={{ margin: '15px 0px', lineHeight: '16px' }}><span style={{ fontSize: 16 }}>24</span>%</span>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <b style={{ fontSize: 16 }}>{provincialLevel[0]}</b>个
                  <div>会员率</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{ background: 'url(/trend/img_圆.png) no-repeat 0% 0 / contain', height: 50, width: 50, display: 'flex', position: 'relative' }} >
                  <img className={'_dot'} src="/trend/_dot.png" alt="" width='100%' height='100%' />
                  <img src='/trend/img_圆点.png' height='10px' alt='' />
                  <span style={{ margin: '15px 0px', lineHeight: '16px' }}><span style={{ fontSize: 16 }}>24</span>%</span>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <b style={{ fontSize: 16 }}>{provincialLevel[1]}</b>个
                  <div>售出率</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', }}>
                <div style={{ background: 'url(/trend/icon_对接事项.png) no-repeat 0% 0 / contain', height: 50, width: 50, display: 'flex' }} >
                  <div className={'_round'}>
                    <img src="/trend/_round.png" alt="" width='100%' height='100%' />
                  </div>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <b style={{ fontSize: 16 }}>{resultVal(provincialLevel[2])}</b>个
                  <div>销售量</div>
                </div>
              </div>
              <div style={{ width: 1, height: 90, background: 'linear-gradient(rgb(21 49 80), #51ade0,rgb(21 49 80))' }}></div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', }}>
                <div style={{ background: 'url(/trend/icon_对接地市综窗.png) no-repeat 0% 0 / contain', height: 50, width: 50, display: 'flex' }} >
                  <div className={'_round'}>
                    <img src="/trend/_round.png" alt="" width='100%' height='100%' />
                  </div>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <b style={{ fontSize: 16 }}>{resultVal(provincialLevel[3])}</b>个
                  <div>发货量</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', }}>
                <div style={{ background: 'url(/trend/icon_对接事项.png) no-repeat 0% 0 / contain', height: 50, width: 50, display: 'flex' }} >
                  <div className={'_round'}>
                    <img src="/trend/_round.png" alt="" width='100%' height='100%' />
                  </div>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <b style={{ fontSize: 16 }}>{resultVal(provincialLevel[4])}</b>个
                  <div>收货量</div>
                </div>
              </div>
              <div style={{ width: 1, height: 90, background: 'linear-gradient(rgb(21 49 80), #51ade0,rgb(21 49 80))' }}></div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', }}>
                <div style={{ background: 'url(/trend/icon_累计收件.png) no-repeat 0% 0 / contain', height: 50, width: 50, display: 'flex' }} >
                  <div className={'_round'}>
                    <img src="/trend/_round.png" alt="" width='100%' height='100%' />
                  </div>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <b style={{ fontSize: 16 }}>{resultVal(provincialLevel[5])}</b>万
                  <div>总成本</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', }}>
                <div style={{ background: 'url(/trend/icon_累计办结.png) no-repeat 0% 0 / contain', height: 50, width: 50, display: 'flex' }} >
                  <div className={'_round'}>
                    <img src="/trend/_round.png" alt="" width='100%' height='100%' />
                  </div>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <b style={{ fontSize: 16 }}>{resultVal(provincialLevel[6])}</b>万
                  <div>总收益</div>
                </div>
              </div>
            </div>
            {/* 第三部分 */}
            <div className={'screen_item3'}>
              <div className={'div_text'}>
                <img src='/trend/title_tysj.png' alt='' width='60%' />
                <span className={'_text'}>年度营收情况对比</span>
              </div>
              <BarChart data={onYear} />
            </div>
            {/* 第四部分 */}
            <div className={'screen_item4'}>
              <div className={'div_text'} style={{ marginBottom: 10 }}>
                <img src='/trend/title_tysj.png' alt='' width='60%' />
                <span className={'_text'}>相关产品租用及售出情况</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                {tabsData.map((v: any, i: number) => (<div key={i} style={{ background: 'url(/trend/img_城市.png) no-repeat 0% 0 / contain', height: 40, width: 90, padding: '4px 20px', paddingRight: 0, marginBottom: 5, marginRight: 3 }} >
                  <div style={{ display: 'flex' }}><b style={{ width: 40, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{activeBtn ? v?.sz : v?.ds}</b><span style={{ position: 'relative', top: '-5px', opacity: .6 }}>{v.bfb}%</span>
                  </div>
                  <b style={{ fontSize: 14 }}>{v.value}</b>&emsp;件
                </div>))}
              </div>
              <div style={{ position: 'absolute', top: 0, right: 0, width: 150, height: 30, display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'center' }}>
                <div style={{ background: `url(/trend/${activeBtn ? 'btn_选中状态.png' : 'btn_未选中.png'}) no-repeat center / contain`, width: 70, padding: 10, cursor: 'pointer' }} onClick={() => (setActiveBtn(true), setTabsData(data4[0]))}>售出量</div>
                <div style={{ background: `url(/trend/${activeBtn ? 'btn_未选中.png' : 'btn_选中状态.png'}) no-repeat center / contain`, width: 70, padding: 10, cursor: 'pointer' }} onClick={() => (setActiveBtn(false), setTabsData(data4[1]))}>租赁量</div>
              </div>
            </div>
            {/* 第五部分 */}
            <div className={'screen_item5'}>
              <div className={'div_text'}>
                <img src='/trend/title_tysj.png' alt='' width='60%' />
                <span className={'_text'}>待优化问题分析</span>
              </div>
              <Linear data={archiveSituation} />
            </div>
          </div>
          <div className={'screen_right'}>
            {/* 第六部分 */}
            <div className={'screen_item6'}>
              <div className={'div_text'}>
                <img src='/trend/title_tysj.png' alt='' width='100%' />
                <span className={'_text'}>用户反馈情况统计</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-evenly', alignItems: 'center', padding: '10px 0' }}>
                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', marginRight: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <img src='/trend/icon_总办件量.png' alt='' width='60' />
                    <div>
                      <div><b style={{ fontSize: 16 }}>{resultVal(receivingOverdue[0])}</b>&nbsp;件</div>
                      <div>非常满意</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <img src='/trend/icon_超期办件量.png' alt='' width='60' />
                    <div>
                      <div><b style={{ fontSize: 16 }}>{resultVal(receivingOverdue[1])}</b>&nbsp;件</div>
                      <div>不满意</div>
                    </div>
                  </div>
                </div>
                <div style={{ textAlign: 'center', position: 'relative' }}>
                  <Volume value={receivingOverdue} />
                  <div>满意度</div>
                  <span style={{ position: 'absolute', left: "50%", top: "20px", transform: 'translateX(-50%)' }}><b style={{ fontSize: 16 }}>{Math.floor(receivingOverdue[0] / receivingOverdue[1] * 100) || 0}</b>%</span>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <img src='/trend/icon_省级.png' alt='' width='14' />&nbsp;<b>产品销售量TOP5</b>
                </div>
                <div>
                  <table style={{ background: 'url(/trend/img_表格背景.png) no-repeat 0% 60px / contain', width: '100%', tableLayout: 'fixed', textAlign: 'center', lineHeight: '30px' }}>
                    <thead>
                      <tr style={{ background: 'url(/trend/img_表头.png) no-repeat 0%/ contain', textIndent: -13 }}>
                        <th><img src='/trend/icon_箭头.png' alt='' width='10' />&nbsp;产品名称</th><th><img src='/trend/icon_箭头.png' alt='' width='10' />&nbsp;售出量数</th><th><img src='/trend/icon_箭头.png' alt='' width='10' />&nbsp;总收益</th></tr>
                    </thead>
                    <tbody>
                      {provincialLevelOverdue.map((v: any, i: number) => (<tr key={i}><td>{v.dwmc}</td><td>{v.zbjs}</td><td>{v.cqbjs}</td></tr>))}
                    </tbody>
                  </table>
                </div>
              </div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
                  <img src='/trend/icon_地市.png' alt='' width='14' />&nbsp;<b>产品租赁量TOP5</b>
                </div>
                <div>
                  <table style={{ background: 'url(/trend/img_表格背景.png) no-repeat 0% 60px / contain', width: '100%', tableLayout: 'fixed', textAlign: 'center', lineHeight: '30px' }}>
                    <thead>
                      <tr style={{ background: 'url(/trend/img_表头.png) no-repeat 0%/ contain', textIndent: -13 }}>
                        <th><img src='/trend/icon_箭头.png' alt='' width='10' />&nbsp;产品名称</th><th><img src='/trend/icon_箭头.png' alt='' width='10' />&nbsp;租赁量</th><th><img src='/trend/icon_箭头.png' alt='' width='10' />&nbsp;总收益</th></tr>
                    </thead>
                    <tbody>
                      {cityLevelOverdue.map((v: any, i: number) => (<tr key={i}><td>{v.dqmc}</td><td>{v.zbjs}</td><td>{v.cqbjs}</td></tr>))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div >
    </Content>
  );
};
